<template>
	<view class="search_bg">
		<view class="search">
			<view style='width: 85%;'>
				<u-search placeholder="搜索车,内容等等" v-model="keyword" :showAction='false' @search='keySearch'></u-search>
			</view>
			<view class='search-text'>
				<text>取消</text>
			</view>
		</view>
		<!-- <view>
			<u-tabs lineWidth="40" :activeStyle='activeStyle' :list="list1" @change='tabs'></u-tabs>
		</view> -->
		<sxs-tabs
		    :selectedId="current"
		    :items="topBar"
		    :options="activeStyle"
		    @change="tabs"
		></sxs-tabs>
		<view class="car" v-if='currentIndex==1 || currentIndex==100'>
			<view class="car_title">
				<text class="car_title_text">车型</text>
				<text class="car_title_textsearch">搜索相关{{ changeInfo }}个</text>
			</view>
			<view v-for='item in car_info' :key='item.id' class="car_detail">
				<view>
					<u--image :showLoading="true" :src="item.appearance_img" width="300rpx" height="200rpx"></u--image>
				</view>
				<view class="car_detail_info">
					<view class="car_detail_info_name">
						{{ item.name }}
					</view>
					<view class="car_detail_info_price">
						￥{{item.price}}万
					</view>
				</view>

			</view>
		</view>



		<view v-if='currentIndex==2 || currentIndex==100 ' class="contain">
			<view class="contain_title">
				<text class="contain_title_text">内容</text>
				<text class="contain_title_textsearch">搜索相关{{ news_info.length }}个</text>
			</view>
			<view v-for='item in news_info' :key='item.id'>
				<view class="contain_detail">
					<view >
						<view class="contain_detail_title">
							{{ item.title }}
						</view>
						<view class="contain_detail_text">
							<view>天天房车</view>
							<view>观看{{ item.views }}</view>
							<view>{{ Data(item.created_at )}}</view>
						</view>
					</view>
					<view  class="contain_img">
						<u--image :showLoading="true" :src="item.img" radius="20rpx" width="300rpx" height="200rpx"></u--image>
					</view>
				</view>
				<view class="line"></view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		search
	} from '@/api/home.js'
	export default {
		data() {
			return {
				currentIndex: 100,
				car_info: [], //车型数据
				news_info: [], //内容数据
				keyword: '',
				topBar:[  //顶部菜单
					{  label:'综合'  },
					{  label:'车型'  },
					{  label:'内容'  },
					{  label:'用户'},
					{  label:'问答'  },
				],
				current:0 ,//默认第一个推荐,
				actIndex:0,//当前显示的topBar
				activeStyle:{
					color:'blue',
				}
			}
		},
		computed: {
			changeInfo() {
				return this.car_info.length;
			}
		},
		onLoad(option) {
			this.keyword = option.key;
			this.getData(option.key);
		},
		methods: {
			Data(data)
			{
				var today = new Date(data);
				var y = today.getFullYear();
				var m = today.getMonth()+1;
				var d = today.getDate();
				var h = today.getHours()+1;
				var mm = today.getMinutes()+1;
				var s = today.getSeconds()+1;
				today =y + '-' + m + '-' + d;
				return today
			},
			getData(key) {
				search({
					search: key
				}).then(res => {
					console.log(res)
					this.news_info = res.data.news_info;
					this.car_info = res.data.car_info;
				})
			},
			tabs(val) {
				if (val.index == 0) {
					this.currentIndex = 100;
				} else {
					this.currentIndex = val.index;
				}
			},
			keySearch() {
				this.getData(this.keyword);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_bg {
		.search {
			display: flex;
			flex-direction: col;
			position: relative;

			.search-text {
				position: absolute;
				right: 0;
				padding: 15rpx 30rpx 0 0;
			}
		}

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 40rpx;
			padding: 0 15rpx;
		}

		.car {
			background-color: #f9f9f9;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.car_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 35rpx;

				.car_title_text {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 40rpx;
					line-height: 56rpx;
				}

				.car_title_textsearch {

					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					/* identical to box height */
					color: #706D6D;
				}

			}

			.car_detail {
				display: flex;
				flex-direction: row;
				margin: 35rpx;

				.car_detail_info {
					display: flex;
					flex-direction: column;
					position: relative;

					.car_detail_info_name {
						display: flex;
						margin: 20rpx 0 0 50rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 36rpx;
						line-height: 50rpx;
						color: #25262A;
					}

					.car_detail_info_price {
						display: flex;
						position: absolute;
						left: 50rpx;
						margin-top: 150rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 32rpx;
						line-height: 44rpx;
						color: #F37A22;
					}
				}
			}
		}

		.contain {
			background-color: #f9f9f9;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.contain_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 35rpx 35rpx 10rpx 35rpx;

				.contain_title_text {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 40rpx;
					line-height: 56rpx;
				}

				.contain_title_textsearch {

					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					/* identical to box height */
					color: #706D6D;
				}
			}

			.contain_detail {
				display: flex;
				flex-direction: row;
				margin: 35rpx;
				
				
				.contain_detail_title
				{
					padding: 15rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: justify;
					color: #362C2C;
				}
				
				
				
				.contain_detail_text
				{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 30rpx;
					margin-right: 20rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #ABABAB;
					
				}
				.contain_img
				{
					margin-top: 20rpx;
				}
			}

			.line {
				margin-left: 20rpx;
				width: 90%;
				height: 2rpx;
				margin-top: 10rpx;
				background-color: rgba(138, 134, 134, 0.3);
			}
		}
	}
	/deep/.tabs-item{
	padding:15rpx 40rpx;
	font-size: 40rpx;
}
</style>